<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='test1'></div>
   

    <script src="../demo1/js/react.development.js"></script>
     <script src="../demo1/js/react-dom.development.js"></script>
     <script src="../demo1/js/babel.min.js"></script>
     <script src="./js/prop-types.js"></script> 

     <script type="text/babel">

      class Live extends React.Component{

          state = {
              opacity:1
          }
          timerID = null

          daesh =()=>{
            //    // 关闭定时器
            //    clearInterval(this.timerID)
              // 卸载组件
              ReactDOM.unmountComponentAtNode(
                  document.querySelector('#test1')
              )
          }

          // 组件挂载完毕调用
          componentDidMount(){
            this.timerID= setInterval(()=>{
                console.log('====');
                  // 更新透明的
                let opacity = this.state.opacity - 0.1
                if(opacity<=0){
                    opacity=1
                }

                this.setState({opacity})
              },200)
          }

          // 组件将要卸载调用
          componentWillUnmount(){
               // 关闭定时器
               clearInterval(this.timerID)
          }

          render() {
            

              return (
                 <div>
                    <h2 style={{opacity:this.state.opacity}} >学不会，怎么办</h2>
                    <button onClick={this.daesh}>不活了</button>    
                </div>
              )
          }
      }

      ReactDOM.render(<Live />, document.querySelector('#test1'))


      // componentDidmount(){} // 挂载完毕
      // componentWillUnmonut(){} // 即将卸载
      
     </script>
</body>
</html>